[react] className을 조건에 따라 여러개 다이나믹하게 선언하기

React 앱에서 클래스 이름을 조건에 따라 다이나믹하게 설정하는 방법을 알아봅니다. 어떻게 하면 될까요?

# React 클래스 이름 선언하는 방법

React는 다른 프레임워크는 문법이 많이 다른 편입니다. 특히 클래스 이름을 선언할 때 역시 방법이 조금 틀립니다. 그런데 자세히 보면 틀린게 아니라 자바스크립트 문법을 그대로 적용한다라고  볼 수 있습니다. 아래에서 자세히 알아봅니다.

! 클래스 이름을 설정하기

먼저 기본부터 알아봅니다. 그냥 조건없이 문자로 바로 선언하는 방법이죠~ i 태그가 있다면 아래와 같이 active 클래스를 추가할 수 있습니다.

이제 i 엘리먼트에는 active 클래스가 선언되어 나타납니다. 이제 변수에 따라 다른 값을 적용하려면 어떻게 할까요?

! 변수명에 따라 다른 클래스명 설정하기

이번 방법은 변수명에 따라 서로 다른 클래스명을 적용하는 방법입니다. 즉 변수를 state에 설정하고 그 값의 조건식에 따라 다른 클래스명이 적용됩니다.

이제 위 예제를 실행하면 결과는 어떻게 될까요? 변수 isActive가 false 이므로 'notActive' 클래스가 적용될 것 입니다. 물론 값이 바뀌면 active로 출력되겠죠.

@ 버튼을 클릭시 바뀌는 예제
그래서 위 예제의 아래에 버튼을 만들었습니다. 버튼을 클릭하면 변수의 boolean 값이 반대로 바뀌도록 설정했습니다. 클릭하면? 클래스명은 'active'로 바뀌게됩니다.

! 여러개의 클래스 명을 조건에 맞게 추가하기

이번에는 변수를 사용해 조건식을 따르되 하나가 아닌 여러개인 경우입니다. 먼저 다른 프레임워크를 생각해보면? 배열에 여러개의 객체를 사용하죠. 하지만 React는 그냥 문자열에 띄워쓰기를 사용하면 됩니다. 생각해보면 더 간단하죠? 예를들어 아래 예제를 보세요.

위 예제와 비슷합니다. 다만 먼저 선언된 'btn'이 보이시죠? 우리가 얻고자 하는 결과는 btn active 또는 btn 둘 입니다. 다만 isActive에 값에 따라 다이나믹하게 변해야하겠죠~
위 코드처럼 문자열로 띄워쓰기를 사용하면 여러개의 클래스를 선언할 수 있습니다. 다만 주의할 점이 있습니다. 바로 괄호의 사용입니다.

@ 괄호 사용에 주의할 것
만약 하나의 클래스만 사용한다면 문제가 없지만 아래의 두 코드는 전혀 다른 결과가 나타날 수 있습니다.

차이점의 괄호의 여부 이지만 괄호를 사용해 그룹으로 정하지 않으면 +가 추가된 부분에서 원하지 않는 부분 결합이 나타나게 되죠.

여기까지 React앱에서 클래스명을 선언하는 다양한 방법을 알아봤습니다 ~ !